<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>21.优雅的开发面板组件</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }

    dl {
      width: 400px;
      display: flex;
      flex-direction: column;
    }

    dt {
      background: #e67e22;
      border-bottom: solid 2px #333;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    dd {
      height: 200px;
      background: #bdc3c7;
      font-size: 5em;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>

<body>
  <dl>
    <dt>后盾人</dt>
    <dd>1</dd>
    <dt>hdcms</dt>
    <dd hidden="hidden">2</dd>
  </dl>
  <script>
    // 面板有hidden 属性就隐藏
    function panel (i) {
      let dds = document.querySelectorAll("dd");
      dds.forEach(dd => dd.setAttribute("hidden", "hidden"));
      dds[i].removeAttribute("hidden");
    }
    document.querySelectorAll("dt").forEach((dt, i) =>
    // 不用传递this 只需传递参数
      dt.addEventListener("click", () => panel.call(null, i))
    );
  </script>
</body>

</html>